<template>
  <el-autocomplete
    :popper-class="uniqueId"
    v-model.trim="form[attributeName]"
    :fetch-suggestions="
      (queryString, cb) => querySearch(queryString, cb, seleteLists, valuekey)
    "
    :placeholder="placeholder"
    :style="{ width: width }"
    clearable
    @clear="handleClear"
    :value-key="valuekey"
    @input="handleIpt"
    @focus="handleFocus"
    @blur="handleBlur"
    :disabled="disabled"
  ></el-autocomplete>
</template>

<script>
export default {
  name: "myElAutocomplete",
  components: {},
  props: {
    placeholder: {
      type: String,
      default: "",
    },
    valuekey: {
      type: String,
      default: "value",
    },
    form: {
      type: Object,
      default: () => ({}),
    },
    attributeName: {
      type: String,
      required: true,
    },
    seleteLists: {
      type: Array,
      default: () => [],
    },
    disabled: {
      type: Boolean,
      default: false,
    },
    width: {
      type: String,
      default: "100%",
    },
    isInput: {
      type: Boolean,
      default: true,
    },
    // dropdownAttribute: {
    //   type: String,
    //   default: "value",
    // },
  },
  data() {
    return {
      isFocus: false,
      uniqueId: "",
    };
  },

  mounted() {
    this.uniqueId =
      Date.now().toString(36) + Math.random().toString(36).substr(2);
  },
  methods: {
    handleFocus() {
      this.isFocus = true;
      setTimeout(() => {
        const doms = [
          ...document.querySelector(
            `.${this.uniqueId} .el-autocomplete-suggestion__list`
          ).children,
        ];
        const obj = doms.find(
          (item) => item.innerText == this.form[this.attributeName]
        );
        if (obj?.id) {
          document
            .querySelector(`#${obj.id}`)
            .scrollIntoView({ block: "center" });
          document.querySelector(`#${obj.id}`).style.background = "#f5f7fa";
        }
      }, 1000);
    },
    handleBlur(val) {
      // const flag = this.seleteLists.find(
      //   (item) => item[this.dropdownAttribute] == this.form[this.attributeName]
      // );
      // if (flag) {
      //   this.form[this.attributeName] = flag[this.valuekey];
      // }
      if (!this.isInput) {
        const flag = this.seleteLists.find(
          (item) => item[this.valuekey] == this.form[this.attributeName]
        );
        if (!flag) {
          this.$set(this.form, this.attributeName, "");
        }
      }
    },
    handleIpt(val) {
      this.isFocus = false;
      // /[!@#$%^&*()（）_+\-—=\[\]【】{};| ':"\\,.<>\/?~`·！￥……”：；‘，。、《》？“’\u4e00-\u9fa5]+/ 只能输入特殊字符和汉字
      this.$emit("inputEvent", val);
    },
    querySearch(queryString, cb, arrayLists, valName) {
      let results = [];
      if (queryString) {
        if (this.isFocus) {
          results = arrayLists;
        } else {
          results = arrayLists.filter(this.createFilter(queryString, valName));
        }
      } else {
        results = arrayLists;
      }
      cb(results);
    },
    createFilter(queryString, valName) {
      return (restaurant) => {
        return restaurant[valName]?.includes(queryString);
      };
    },
    handleClear() {
      document.activeElement.blur();
    },
  },
};
</script>

